<template>
	<!-- <cl-page> -->
	<view class="export-wrap">
		<cl-button type="primary" @tap.stop="onExport()">导出成pdf</cl-button>
	</view>
	<view class="page-wrap" :class="[exportIng ? 'exportIng' : '']">
		<view class="page-wrap-cell page-1">
			<module-title :info="info" />
			<view class="number fs-22">合同编码：{{ info.no }}</view>
			<view class="title">参展协议书</view>
			<view class="title-info">
				<view class="info-cell" v-for="(item, index) in titleInfo.list" :key="index">
					<text class="info-cell_label">{{ item.label }}：</text>
					<text class="info-cell_value">{{ item.value }}</text>
				</view>
			</view>
			<view class="fs-20">鉴于：</view>
			<view class="line indent">
				<text>甲方作为展会承办单位接受乙方作为参展商参加定于</text>
				<text class="text-b-line big-line">{{ info.projectTime }}</text>
				<text>在南安成功会展中心举办的</text>
				<text class="text-b-line big-line">{{ info.projectName }}</text>
				<text
					>
					<text>及同期同地举办的相关活动</text>
					<text class="text-bold">（展会题目、形式、举办场馆和日期以政府最后批文为准）</text>。
					<text>现甲乙双方经友好协商，就乙方出资购买甲方提供的展位、广告立传及相关服务（观众人数、展会效果、交易机会等受市场及其他外部因素影响，屈商业风险，井非甲方提供的服务范畴，亦非甲方的保证事项）相关事宜，达成协议如下：</text>
				</text>
			</view>
			<view class="line indent text-bold"> 一、甲方为乙方提供以下展位 </view>
			<view class="line indent"
				>（展位号及展会的具体位只以附件t:《参展商服务手册》内的平面图为准）</view
			>
			<!-- 表格 -->
			<table class="table-comm-wrap">
				<tr>
					<td colspan="2">
						<text class="text-bold">展商名称</text>
					</td>
					<td colspan="4">
						<text>{{ info.deaName }}</text>
					</td>
					<td colspan="2">
						<text class="text-bold">品牌名称</text>
					</td>
					<td colspan="4">
						<text></text>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<text class="text-bold">联系人</text>
					</td>
					<td colspan="4">
						<text></text>
					</td>
					<td colspan="2">
						<text class="text-bold">联系电话</text>
					</td>
					<td colspan="4">
						<text></text>
					</td>
				</tr>
				<tr>
					<td colspan="12">
						<view class="text-bold text-center">订展详情</view>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<text class="text-bold">展位类型</text>
					</td>
					<td colspan="4">
						<text></text>
					</td>
					<td colspan="2">
						<text class="text-bold">数量</text>
					</td>
					<td colspan="4">
						<text>
							<text class="text-b-line">{{ info.turns.length }}</text>
							个(24平方m²/个)
						</text>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<text class="text-bold">展位号</text>
					</td>
					<td colspan="4">
						<text>{{ info.turns.map((item: any) => item.eBNo).join(',') }}</text>
					</td>
					<td colspan="2">
						<text class="text-bold">展位规格</text>
					</td>
					<td colspan="4">
						<text>
							长<text class="text-b-line"></text>M
							<text class="mlr-4">*</text>
							宽<text class="text-b-line"></text>M
							<text class="mlr-4">*</text>
							高<text class="text-b-line"></text>M
						</text>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<text class="text-bold">展位费</text>
					</td>
					<td colspan="4">
						<text></text>
					</td>
					<td colspan="2" rowspan="2">
						<text class="text-bold">备注</text>
					</td>
					<td colspan="4" rowspan="2">
						<text></text>
						<!-- <text class="text-b-line"></text>
						元/m² -->
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<text class="text-bold">卫生费</text>
					</td>
					<td colspan="4">
						<text>/</text>
					</td>
				</tr>
				<tr>
					<td colspan="12">
						<view class="text-bold text-center">广告项目</view>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<text class="text-bold">广告位编号</text>
					</td>
					<td colspan="2">
						<text>/</text>
					</td>
					<td colspan="1">
						<text class="text-bold">规格</text>
					</td>
					<td colspan="3">
						<text>
							宽<text class="text-b-line"></text>M
							<text class="mlr-4">*</text>
							高<text class="text-b-line"></text>M
						</text>
					</td>
					<td colspan="1">
						<text class="text-bold">费用</text>
					</td>
					<td colspan="3">
						<text>/</text>
					</td>
				</tr>
				<tr>
					<td colspan="2" class="text-bold">合同总价</td>
					<td colspan="10">
						<text>
							<text>人民币大写</text>
							<text class="text-b-line big-line"></text>
							<text>元整</text>
							￥<text class="text-b-line big-line"></text>元
						</text>
					</td>
				</tr>
				<tr>
					<td colspan="2" class="text-bold">展品类别</td>
					<td colspan="10">
						<text></text>
					</td>
				</tr>
				<tr>
					<td colspan="2" class="text-bold">展会日期</td>
					<td colspan="5">
						<text>
							<text>{{ info.projectTime }}</text>
							<text>（以政府最终批文为准）</text>
						</text>
					</td>
					<td colspan="2" class="text-bold">举办地点</td>
					<td colspan="3">
						<text>福建南安成功国际会展中心</text>
					</td>
				</tr>
				<tr>
					<td colspan="2" class="text-bold">其他说明</td>
					<td colspan="10">
						<text
							>请将公司简介（200字左右）发送电子版给业务员，以便刊登会刊（免费）</text
						>
					</td>
				</tr>
			</table>
			<!-- 表格 -->
			<view class="line text-bold">二、付款</view>
			<view class="line">
				<text>（一） 本协议总价软合计人民币 </text>
				<text class="text-b-line big-line"></text>
				<text>元（包含税费）。</text>
			</view>
			<view class="line">甲方收取本协议总价款的指定账户如下：</view>
			<view class="block text-main text-bold">
				<view>户名：福建合诚展会策划有限责任公司</view>
				<view>账号：7959 0188 0000 15449</view>
				<view>开户行：中国工商银行南安支行</view>
			</view>
			<view class="line">
				<text>（二） 乙方应在合同签订后的5日内将总价款人民币</text>
				<text class="text-b-line big-line"></text>
				<text>元（大写： 人民币</text>
				<text class="text-b-line big-line"></text>
				<text>园整）</text>
				<text>汇款至主办方的指定账号，否则视为乙方放弃展位，合同未生效</text>
			</view>
			<view class="line text-bold">三、甲方权利、义务</view>
			<view class="line"
				>（一）甲方有权根据展会及政府部门的日程，安排和调整展会的行程和进程</view
			>
			<view class="line"
				>（二）甲方应积极主动与政府部门、展馆协商配合，负贡乙方参加展会期间的相关服务，例如展会安排、证件办理、会务协调、安全保卫等事宜。</view
			>
			<view class="line"
				>（三）为便千展会的整体组织，甲方有权对确认展位进行调整，乙方同意甲方对展位的展前调整和现场调整,当与其他参展单位出现分歧和矛盾时，乙方应服从组委会的协调和裁决。</view
			>
			<view class="line"
				>（四）为确保展会现场安全秩序，甲方有权对乙方和参观者采取相应安全预防、应急处仅挡施以应对相关安全韦件（包括但不仅限千自然灾吉、事故灾难、公共卫生事件和社会安全市件等），乙方应配合甲方的相关处仅挡施。</view
			>
			<view class="line"
				>甲方有权采取的上述相关拈施包括但不仅限于：改变展位、移动展会设施、关闭展馆入口或出口、封锁展会现场、疏散现场人群、对展位进行结构性调整等,甲方单独或配合政府相关部门采取上述处仅措施的，乙方无权提出相关索赔请求。</view
			>
			<view class="line text-bold">四、乙方权利、义务</view>
			<view class="line"
				>（一）乙方展位摊位不得转让或租赁他人，
				亦不得与本单位以外的他人合用,乙方进场身份以参展报名时向甲方提交的营业执照信息为准，进场身份与报名身份不一致不得进场</view
			>
			<view class="line"
				>（二）乙方不得立传假冒伪劣产品，不得佼犯他人知识产权，否则，乙方应无条件闭展、撤展外井承担相应法律贡任</view
			>
			<view class="line"
				>（三）乙方负贡将展品运输至展会举办地点井承担运输费用,乙方负贡安排展会期间的展品仓储,乙方应在展会规定的时间内将所有展品撤出展场，否则山此引起的损失和延误，乙方应向甲方作出赔偿.</view
			>
			<!-- 页尾 -->
			<view class="page-footer">第1页共2页</view>
		</view>
		<view class="page-wrap-cell page-2">
			<module-title v-if="exportIng" :info="info" />
			<view class="line"
				>（四）乙方进行展品演示应确保安全、采取必要挡施，不得妨码公共走庇或相邻展位,如因演示发生危险，导致人员伤亡或财产损失，乙方须承担全部贡任,乙方须爱护展场设施，不得随意张挂或故意损坏，如有损坏的照价赔偿</view
			>
			<view class="line"
				>（五）乙方参展期间应加强内部管理，避免乙方相关人员（包括但不仅限于乙方崩员、乙方搭廷单位雇员）与第三人发生纠纷,若发生相关纠纷，可先由甲方协调解决，协调不成出纠纷当事双方自行解决，由此产生的任何争议均与甲方无关,乙方相关人员不得在展会现场以任何不文明手段影响展会正常秩序（包括但不仅限于谩骂、斗殴、冲击他人展位等）,
			</view>
			<view class="line"
				>（六）乙方不得展出与展会主题无关的展品，不得展出未申报的产品和品牌，不得零售展品,乙方摆放的所有展品不得超出展位区域，如因乱摆乱占造成通道拥堵，甲方可先行劝阻,对屡劝不听的，甲方有权将此展品济出展场</view
			>
			<view class="line"
				>（七）乙方在展会期间应始终保持展位对观众正常开放,未向甲方申报井经甲方许可，乙方不得提前闭展、撤展,
			</view>
			<view class="line"
				>（八）乙方在布展及展会举办期间应遵守《参展商服务手册》的相关规定</view
			>
			<view class="line text-bold">五、违约责任</view>
			<view class="line"
				>乙方行为违反本协议第三条、第四条规定的，为保证展会正常秩序，甲方有权禁止乙方参展井收回乙方展位，且乙方已交费用不予退还,由此可能产生的一切贡任均由乙方承担。同时，乙方应按协议总价款2OOlo向甲方计付违约金</view
			>
			<view class="line"
				>若乙方因同一行为还应当承担行政贡任或者刑亨贡任的，甲方依法将报送有管辖权的公安机关追究乙方贡任</view
			>
			<view class="line text-bold">六、不可抗力</view>
			<view class="line"
				>（一）由千下列匝因致使展会被取泭、延期或缩短展期的，甲方应将事由情况及时通知乙方，由此给乙方造成的损失，
				甲方无须承担贡任</view
			>
			<view class="block">
				<view>
					<view>1、不可抗力</view>
					<view>2、战争行为、军亨活动、地方性法规或政府部门的要求。</view>
					<view>3、火灾、水灾、台风、极端的恶劣天气、地恁、流行性疾病等自然灾害</view>
					<view>4、双方不能预见、不能避免、不能克服的其他情况。</view>
				</view>
			</view>
			<view class="line"
				>（二）由于上述不可抗力予由导致展会取消的，甲方为乙方已支出的费用不予退还，未发生的费用支出无息退还乙方。</view
			>
			<view class="line"
				>（三）由千上述不可抗力乎由导致展会延期举办或缩短展期的，本协议仍然有效。如乙方提出取消参展的，则乙方已支</view
			>
			<view class="line">付给甲方的费用不予返还，甲方已提供的服务不再额外收费</view>
			<view class="line text-bold">七、保密</view>
			<view class="line"
				>根据本协议，有关当平方获知相对方的一切文件、资料和其他信息，除非事先获得相对方的同意，任何一方均不得以任何形式公开或向第三人披码或作本协议目的以外使用,保密条款不因本协议的终止而失效</view
			>
			<view class="line text-bold">八、特别约定</view>
			<view class="line"
				>乙方于报名参展前经甲方披露及各方信总收拱，已充分了解本展会的创办背景、影响力及其组织架构，亦充分知悉展会举办需审慎考及指导单位南安市人民政府、各政府部门等协办单位相关工作安排等各方因素，井砓终由当地市委市政府审核批准决定举办时间、地点、展期等,乙方基千充分理上述信息确定报名参展，井同意下列条款；</view
			>
			<view class="line">（一）展会举办时间、地点、展期及展会形式等以砓终政府批文为准, </view>
			<view class="line"
				>（二）如遇特殊情形（包括但不仅限千本协议第六条约定的情形），展会举办时间、地点、展期及展会形式可据此变更,井以母终政府批文为准，本协议仍然有效</view
			>
			<view class="line text-bold">九、有效通知</view>
			<view class="line">（一）有效联系方式</view>
			<view class="line"
				>乙方在合同上列明的联系方式均为贞实有效的联系方式（包括但不仅限于电子邮件地址、联系电话、联系地址、饮信号等），对千联系方式发生变更的，乙方有义务及时更新有关信息，并保持可被有效联系的状态</view
			>
			<view class="line">（二）通知的送达</view>
			<view class="line"
				>1、甲方有关通知按照乙方在合同上列明的联系方式发出的，通知自送达之日生效：通过邮件基础的文件，签收或守一一心出7天视为送达；贞接交付的文件，在交付时视为送达；通过传五发出的文件，在传亢发出视为送达；通过彶信传输的文件，在信息发出时送达</view
			>
			<view class="line"
				>2、乙方同这司法机关（包括但不限千人民法院）可以通过手机短信、电子邮件、惊信号或住址等通讯方式或邮寄方式
				送达相关文书，指定接收文书的通讯方式为乙方在本协议列明的联系方式,司法机关向上述联系方式发出法律文书即视为送达</view
			>
			<view class="line"
				>3、采取多种方式向乙方送达相关文书的，送达时间以上述送达方式中朵先送达的为准</view
			>
			<view class="line text-bold">十、争议解决</view>
			<view class="line"
				>凡因本合同所发生的或与本合同有关的一切争议，各方可通过友好协商解决。在协商不能解决或一方不愿意通过协商解决时，任何一方有权将争议提交甲方所在地有管辖权的人民法院管辖</view
			>
			<view class="line text-bold">十一、其他约定</view>
			<view class="line"
				>本协议一式两份，双方各执一份，具有同等法律效力。协议双方中一方先益章，并扫描发送给另一方，另一方再描回传的，扫描件视为原件，与原件具有同等效力。本协议未尽事宜，由双方另签补充协议予以明确，体充协议与有同等效力。</view
			>
			<view class="line"
				>本协议文本、协议的附件及展今规关规章制度、参展于册、进场须知等，粤为本协议不可分划的组成部分，与本协议具有同等法律效力。乙方欲签“本协议前“应仔细阅读并充分理解《参展商服务手册》展会相关规章制度等上述文本资料内容</view
			>
			<view class="line">（以下为签章，无正文）</view>
			<view class="sign-info">
				<view class="sign-cell" v-for="(item, index) in signInfo.list" :key="index">
					<text class="sign-cell_label">{{ item.label }}:</text>
					<text class="sign-cell_value">{{ item.value }}</text>
				</view>
			</view>
			<!-- 页尾 -->
			<view class="page-footer">第2页共2页</view>
		</view>
	</view>
	<!-- </cl-page> -->
</template>

<script lang="ts" setup>
import ModuleTitle from "./components/module/title.vue";

import { onLoad } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import { usePDF } from "/@/utils/pdf";
import wx from "weixin-js-sdk";
import { useCool, useStore } from "/@/cool";
// import { useUi } from "/@/cool/ui";

const { router, service, ui, refs, setRefs } = useCool();
const { user, dict } = useStore();

const titleInfo = reactive<any>({
	list: [
		{
			label: "甲方",
			value: "福建合诚展会策划有限责任公司",
		},
		{
			label: "乙方",
			value: "",
			key: 'deaName'
		},
		{
			label: "地址",
			value: "福建省南安市成功科技园",
		},
		{
			label: "地址",
			value: "",
		},
		{
			label: "电话",
			value: "0595-86392918",
		},
		{
			label: "电话",
			value: "",
		},
		{
			label: "传真",
			value: "0595-86392918",
		},
		{
			label: "传真",
			value: "",
		},
		{
			label: "电邮",
			value: "",
		},
		{
			label: "电邮",
			value: "",
		},
	],
});

const signInfo = reactive<any>({
	list: [
		{
			label: "甲方（签章）",
			value: "福建合诚展会策划有限责任公司",
		},
		{
			label: "乙方（签章）",
			value: "",
			key: 'deaName'
		},
		{
			label: "授权签署人",
			value: "",
		},
		{
			label: "授权签署人",
			value: "",
		},
		{
			label: "签约时间",
			value: "",
		},
		{
			label: "签约时间",
			value: "",
		},
		{
			label: "指定联系微信号",
			value: "",
		},
		{
			label: "指定联系微信号",
			value: "",
		},
	],
});

const info = ref<any>({
	projectName: "",
	turns: [],
});

function getInfo(billid: string) {
	// 获取合同信息
	service.booth.loadContract({ billid }).then((res: any) => {
		if (res.success) {
			let _res = res.data;

			_res.projectName = dict.getLabel("project", _res.projectId);

			info.value = _res;

			titleInfo.list = titleInfo.list.map((item: any) => {
				return {
					...item,
					value: item.key && _res[item.key] ? _res[item.key] : item.value,
				};
			})

			signInfo.list = signInfo.list.map((item: any) => {
				return {
					...item,
					value: item.key && _res[item.key] ? _res[item.key] : item.value,
				};
			})
		}
	});
}

// 导出成pdf
const exportIng = ref(false);
const pdf = usePDF();
async function onExport() {
	if (exportIng.value) return false;

	exportIng.value = true;

	uni.showLoading({
		title: "导出中...",
	});
	const pdfRes = await pdf
		.toPDF({
			target: ".page-wrap",
			width: "780px",
			scope: {},
			flat: "download",
		})
		.finally(() => {
			exportIng.value = false;
			uni.hideLoading();
			// ui.showToast('下载成功!')
		});

	console.info("pdfRes", pdfRes);

	setTimeout(() => {
		uni.showLoading({ title: "关闭页面导出pdf文件..." });
		setTimeout(() => {
			wx.miniProgram.postMessage({
				data: {
					msg: pdfRes,
					name: "合成展会合同",
				},
			});

			wx.miniProgram.navigateBack({ delta: 1 });

			setTimeout(() => {
				uni.hideLoading();
			}, 1000);
		}, 1000);
	}, 1000);
}

onLoad(async (params: any) => {
	dict.refresh();

	if (!params) {
		ui.showToast("合同不存在");
		return false;
	}
	getInfo(params.billid);
});
</script>

<style lang="scss" scoped>
.export-wrap {
	width: 780px;
	display: flex;
	justify-content: flex-end;
	padding: 10px 30px 5px;
	background-color: #fff;
	// box-sizing: border-box;
	box-sizing: border-box;
}
.page-wrap {
	width: 780px;
	padding: 0.7px 30px;
	padding-bottom: 20px;
	box-sizing: border-box;
	background-color: #fff;
	&-cell {
		// width: 750rpx;
		// height: 1053rpx;
		// border: 1px solid #000;
		color: #666;
		// height: 1697px;
	}
	&.exportIng {
		padding-bottom: 0;
		.page-1 {
			height: 1100px;
		}
	}
	.page-1 {
		.number {
			text-align: right;
		}
		.title {
			font-size: 18px;
			text-align: center;
			font-weight: 600;
			color: #000;
			// margin-bottom: 2px;
		}
		.title-info {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.info-cell {
				display: flex;
				align-items: flex-start;
				width: 46%;
				color: #000;
				font-weight: 600;
				&_label {
					// width: 200rpx;
				}
				&_value {
					flex: 1;
				}
			}
		}
	}
	.page-2 {
		.sign-info {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 10px;
			.sign-cell {
				display: flex;
				align-items: flex-start;
				width: 46%;
				color: #000;
				font-weight: 600;
				&_label {
					// width: 200rpx;
				}
				&_value {
					flex: 1;
				}
			}
		}
	}
	.line {
		// margin: 0.4px 0;
		text-indent: 28px;
		font-size: 12px;
		letter-spacing: 1px; /* 在字母之间增加 2 像素的间距 */
		.text-b-line {
			display: inline-block;
			min-width: 26px;
			padding: 0 8px;
			border-bottom: 0.7px solid #999;
			&.big-line {
				min-width: 70px !important;
			}
			// font-size: 14px;
			// text-decoration: underline;
		}
	}
	.block {
		padding-left: 44px;
		font-size: 12px;
	}
	.page-footer {
		font-size: 12px;
		text-align: center;
		width: 100%;
		letter-spacing: 4px; /* 在字母之间增加 2 像素的间距 */
		margin-top: 2px;
	}
}

.table-comm-wrap {
	margin-top: 1px;
	margin-bottom: 1px;
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	th,
	td {
		border: 1px solid #666;
		padding: 3px 2px;
		text-align: center;
		flex: 1;
		font-size: 12px;
		.text-bold {
			letter-spacing: 2px; /* 在字母之间增加 2 像素的间距 */
		}
		.text-b-line {
			min-width: 10px;
			padding: 0 2px;
			border-bottom: 0.7px solid #999;
			display: inline-block;
			&.big-line {
				min-width: 70px !important;
			}
			// font-size: 14px;
			// text-decoration: underline;
		}
	}
	th {
		background-color: #f2f2f2;
	}
}
</style>
